<script setup>
import { config, config1, batteryType, batteryDdlpyl, batteryJdcspyl, configErr } from '../common'


import seamlessScroll from '@/components/seamlessScroll.vue'


</script>

<template>
  <!-- xwmd:(w-[30.9%]) xwlg:(w-[34.3%]) -->
  <div class="wxwxs:(w-full) xwsm:(w-[32.9%]) ">


    <div class="text-[40px] min_color  flex items-center xwxs:(h-[400px]) xwsm:(h-[13%])" style="font-weight: 600;">
    </div>

    <div
      class=" mb-[16px] rounded-[28px]  px-[24px] flex flex-col xwxs:(h-[1200px] pt-[50px]) xwsm:(h-[55.9%] py-[16px])"
      style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
      <div class="flex items-center">
        <img class="xwxs:(w-[180px] h-[180px]) xwsm:(w-[30px] h-[30px])" src="../../../assets/home/shitu2.png" alt="">
        <div
          class="ml-[12px]  font-semibold font_Electronic xwxs:(text-[56px] leading-[56px]) xwsm:(text-[30px] leading-[23px])"
          style="color: #10735C;">实时数据
        </div>

      </div>

      <div class="flex-1 mt-[25px] overflow-hidden">
        <div class="max-h-[100%]">
          <seamlessScroll></seamlessScroll>
        </div>
        <!-- <dv-scroll-board :config="config" style="width:100%;height:100%" /> -->
      </div>

    </div>
    <div class=" xwxs:(h-[66px]) xwsm:(h-[0px])"></div>

    <!-- 下 -->
    <div
      class="rounded-[28px] py-[16px] px-[24px] flex flex-col overflow-hidden relative xwxs:(h-[900px]) xwmd:(h-[27.6%]) xwlg:(h-[25.6%])"
      style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">



      <div class="flex justify-center items-center h-[25%] text-[30px] font-semibold font_Electronic"
        style="color: #10735C;">


        {{ batteryType == 0 ? '实时告警数据' : batteryType == 1 ? '预估油品寿命' : '数据偏移率' }}
      </div>
      <template v-if="batteryType == 0">
        <div class="flex-1 overflow-hidden ">
          <dv-scroll-board :config="configErr" style="width:100%;height:100%" />
        </div>
      </template>

      <template v-else-if="batteryType == 1">
        <div class="flex flex-1 justify-center items-center">
          <dv-percent-pond :config="config1" style="width:200px;height:100px;" />
        </div>
      </template>

      <template v-else>
        <div class="flex flex-1 justify-center items-center gap-[20px]">
          <div>
            <div class="flex  justify-center items-center mb-[20px]">介电常数偏移率</div>
            <dv-percent-pond :config="batteryJdcspyl" style="width:100px;height:80px;" />
          </div>
          <div>
            <div class="flex  justify-center items-center mb-[20px]">电导率偏移率</div>
            <dv-percent-pond :config="batteryDdlpyl" style="width:100px;height:80px;" />
          </div>
        </div>
      </template>

    </div>
    <!-- end -->

  </div>
</template>

<style scoped>
input {
  border: 1px solid #B5C7C7;
  border-radius: 6px;
  padding: 0 35px 0 10px;
}

input:focus {
  outline: none;
  border: 1px solid #1a9648;
}

input::placeholder {
  font-size: 14px;
  color: #969C94;

}

:deep(.active-ring-name) {
  display: none !important;

}

:deep(.dv-digital-flop) {
  /* height: 100px !important; */
}

:deep(.dv-scroll-board .rows .ceil) {
  padding: 0 5px;
}
</style>
